import './App.css'
import React from 'react'


function HelloFn() {
  function handler(e) {
    console.log('点我了', e);

  }


  return (
    <div>
      <h1>hello world</h1>
      <button onClick={handler}>点我</button>
    </div>
  )
}

class HiFn extends React.Component {
  render() {
    return <h1>hello</h1>
  }
}

function List() {
  const hand = (item) => {
    console.log(item.name);

  }

  const list = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' },
  ]

  return (
    <ul>
      {
        list.map((item, index) => {
          return <li onClick={() => hand(item)} key={item.id}>{item.name}</li>
        })
      }
    </ul>
  )
}


function App() {
  const name = '七七'
  const list = [
    { id: 1, name: 'a' },
    { id: 2, name: 'b' },
    { id: 3, name: 'c' },
  ]
  const flag = false
  const styleObj = {
    color: 'blue'
  }
  const showTitle = true


  return (
    // <div className="App">
    //   Hello world -- {name}


    //   {/* 循环渲染 */}
    //   <ul>
    //     {
    //       list.map((item, index) => {
    //         return <li key={item.id}>{item.name}</li>
    //       })
    //     }
    //   </ul>


    //   {/* 条件渲染 */}
    //   <div className="flag">{flag ? 'react真好玩' : 'vue 更有趣'}</div>
    //   <div className="flag">
    //     {
    //       flag ? (
    //         <div>
    //           <h2>react真好玩</h2>
    //         </div>
    //       ) : <h2>vue更有趣</h2>
    //     }
    //   </div>


    //   {/* 样式 */}
    //   <div className="box" style={{ color: 'red' }}>this is a box</div>
    //   <div style={styleObj}>this is a box</div>
    //   <div className="title">标题</div>
    //   <div className={showTitle ? 'title' : ''}>动态类名</div>


    // </div>

    <div className="App">
      <HelloFn></HelloFn>
      <HiFn></HiFn>
      <List></List>
    </div>
  )
}

export default App